import React, {useState} from 'react';
import {ObserverView, TabTitle} from '../../components';
import Content from './content';
import {dpw136, dpw230, dpw40} from '../../constants';
import {useGlobalStore} from '../../mobx';

const titles = [
  {
    id: 1,
    tKey: 'recom_cardoon',
    type: 'tab-title',
    left: dpw40,
  },
  {
    id: 2,
    tKey: 'hot_stores',
    type: 'tab-title',
    left: dpw136,
  },
  {
    id: 3,
    tKey: 'featured_videos',
    type: 'tab-title',
    left: dpw230,
  },
];

const Home = ({navigation}: any) => {
  const [idx, setIdx] = useState(0);
  const {changeToastKey} = useGlobalStore();

  const changeId = (id: number) => {
    if (id === 2 || id === 1) {
      changeToastKey('construction');
    } else if (id !== idx) {
      setIdx(id);
    }
  };

  return (
    <ObserverView style={{flex: 1}} themeStyle={{backgroundColor: 'color_12'}}>
      <TabTitle titles={titles} pid={idx} onChange={changeId} />
      <Content idx={idx} navigation={navigation} />
    </ObserverView>
  );
};

export default Home;
